<template>
  <div class="agency-achievement">
    <div class="agency-achievement-header">
      <span class="agency-achievement-header-left">{{ kind === 'cutPrice' ? '帮砍价' : kind === 'groupPurchase' ? '多人拼团' : kind === 'quickSell' ? '秒杀' : '竞答' }}活动配置</span>
    </div>

    <el-row style="margin-top:20px;">
      <el-col :span="10">
        <el-input v-model="keyword" style="width:200px" placeholder="请输入搜索内容" @keyup.enter.native="handleFilter"/>
        <el-button type="primary" style="margin-left:10px;" @click="handleFilter">搜索</el-button>
        <el-button size="medium" type="info" @click="clearParams">清空</el-button>
      </el-col>
      <el-col :span="2" :offset="12">
        <el-button type="primary" icon="el-icon-plus" @click="addActivity">新增活动</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      :default-sort="{prop: 'typeIndex', order: 'ascending'}"
      border
      style="width: 100%;text-align:center;margin-top:20px;"
    >
      <el-table-column :index="typeIndex" type="index" label="编号" align="center" width="100"/>
      <el-table-column prop="name" label="活动名称" sortable column-key="name" align="center"/>
      <el-table-column prop="startTimeStr" label="开始时间" sortable column-key="startTime" min-width="100" align="center"/>
      <el-table-column prop="endTimeStr" label="结束时间" sortable column-key="endTime" min-width="100" align="center"/>
      <el-table-column prop="status" label="状态" sortable column-key="state" align="center">
        <template slot-scope="scope">
          <span type="text">{{ scope.row.startTime > Date.now() ? '未开始' : (scope.row.startTime < Date.now() && scope.row.endTime > Date.now()) ? '进行中' : scope.row.endTime < Date.now() ? '已结束' : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="活动订单量" sortable column-key="order" align="center"/>
      <el-table-column label="操作" min-width="150" align="center">
        <template slot-scope="scope">
          <el-button type="success" size="mini" icon="el-icon-view" @click="viewOrder(scope.row)">查看订单</el-button>
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="editActivity(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteActivity(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="margin:20px 0;">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        :total="tableData.length"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <!-- 查看详情弹框 -->
    <el-dialog :visible.sync="viewDialogVisible" title="提示" width="50%">
      <el-table
        :data="viewDialogTableData"
        :default-sort="{prop: 'state', order: 'descending'}"
        border
        style="width: 100%;text-align:center;margin-top:20px;"
      >
        <el-table-column prop="sn" label="订单号" align="center"/>
        <el-table-column prop="title" label="商品名称" align="center"/>
        <el-table-column prop="userName" label="会员" align="center"/>
        <el-table-column prop="status" label="支付状态" align="center"/>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="viewDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {deleteActivity, getActivityListByKind, getActivityOrderList} from '@/api/tinysale/addActivity'
  import {getTenantId} from '@/utils/auth'

  export default {
    data() {
      return {
        kind: '',
        keyword: '',
        tableData: [],
        filterData: [],
        // 分页数据
        currentPage: 1,
        pageSize: 5,
        // 查看订单弹框默认隐藏
        viewDialogVisible: false,
        viewDialogTableData: []
      }
    },
    mounted() {
      // 获取上级路由点击的是哪一个按钮
      this.kind = this.$route.params.kind
      this.getData()
    },
    methods: {
      // 动态生成表格编号
      typeIndex(index) {
        return index + (this.currentPage - 1) * this.pageSize + 1
      },
      getData() {
        console.log(this.kind)
        if (this.kind) {
          getActivityListByKind(this.kind, getTenantId()).then(res => {
            this.tableData = res.data.items
            this.filterData = res.data.items
          })
        }
      },
      // 关键字搜索
      handleFilter() {
        this.tableData = this.filterData.filter(item => {
          if (this.keyword && item.name.toLocaleLowerCase().indexOf(this.keyword.toLocaleLowerCase()) < 0) return false
          return true
        })
      },
      clearParams() {
        this.keyword = ''
        this.getData()
      },
      // 新增活动跳转
      addActivity() {
        this.$router.push({name: 'UserSet', params: {kind: this.kind}})
      },
      // 查看订单
      viewOrder(row) {
        this.viewDialogVisible = true
        getActivityOrderList(row.id).then(res => {
          this.viewDialogTableData = res.data.items
          this.viewDialogTableData.map(item => {
            if (item.status === 'created') {
              item.status = '待支付'
            }
            if (item.status === 'paid') {
              item.status = '已支付'
            }
          })

        })
      },
      // 编辑跳转新增活动
      editActivity(row) {
        this.$router.push({name: 'UserSet', params: row})
      },
      // 删除按钮事件
      deleteActivity(row) {
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteActivity(row.id).then(res => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getData()
          })
        })
      },
      // 分页设置
      handleCurrentChange(arg) {
        this.currentPage = arg
      },
      handleSizeChange(arg) {
        this.pageSize = arg
      }
    }
  }
</script>

<style lang="scss">
  .agency-achievement {
    padding: 0 20px;

    &-header {
      color: rgb(52, 172, 228);
      padding: 10px 30px;
      background: #f0f3ff;
      margin-top: 20px;
      overflow: hidden;

      &-left {
        font-size: 18px;
        line-height: 1.8;
      }
    }
  }
</style>
